<template>
  <div :id="data.id" class="chart" :style="{width: '100%', height: '200px'}"></div>
</template>

<script>
  import echarts from 'echarts'
  export default {
    name: 'xwPassengerFlow',
    data() {
      return {
      }
    },
    props: ["data", "xData", "yData"],
    computed: {

    },
    watch: {
      //观察xData的变化
      xData(newVal, oldVal) {
//        console.log(1);
        this.loadLine(this.data,newVal,this.yData);
      },
      //观察yData的变化
      yData(newVal, oldVal) {
//        console.log(2);
        this.loadLine(this.data,this.xData,newVal);
      },
    },
    mounted() {
      this.loadLine(this.data,this.xData,this.yData);
    },
    methods: {
      loadLine(data,xData,yData){
        let option = {
          title: {
            text: ''
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: []
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data:xData // x轴数据
          },
          yAxis: {
            type: 'value',
            axisLabel: {formatter:'{value}'+data.unit}
          },
          series: [
            {
              name: '',
              type: 'line',
              color: '#488BFF',
              data:yData // y轴数据1
            }
          ]
        };
        this.chart = echarts.init(document.getElementById(data.id));
        this.chart.setOption(option);
        window.addEventListener("resize", this.chart.resize);
      },
    }
  }
</script>
